// pages/food/food.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 美食数据
    food_list: [],
     // 获取前五个美食数据作为轮播
      currentItemIndex: 0, // 轮播图当前页面变量
      containerHeight: 0, // 获取轮播图container的高度
      blurValue: 0, // 虚化效果的模糊半径
      scaleValue: 1, // 缩小效果的比例
  },

  /*** 生命周期函数--监听页面加载*/
  onLoad(options) {
    this.queryContainerHeight()
    wx.cloud.callFunction({
      name: 'getFoodList',
      success: res => {
        // const swiperFoods = res.result.slice(0, 5)
        this.setData({
          food_list: res.result,
          // swiperFoods
        })
      },
      fail: err => console.error('获取数据失败：', err)
    })
  },
  
  // 详情页跳转
  goToDetail: function (e) {
    const foodId = e.currentTarget.dataset.id;
    console.log(foodId,'foodid');
    wx.navigateTo({
      url: `../foodDetail/foodDetail?id=${foodId}`,
    })
  },
  // 控制放大当前轮播图
  onSwiperChange(e) {
    this.setData({
      currentItemIndex: e.detail.current
    });
  },

  
  // 监听页面滚动事件
  onPageScroll: function (e) {
    console.log("e.scrollTop", e.scrollTop);

    var seeHeight = this.data.containerHeight - e.scrollTop;
    if (seeHeight == 0 || seeHeight == this.data.containerHeight) {
      this.setData({
        scaleValue: 1,
        blurValue: 0
      });
    } else if (seeHeight > 0) {
      this.setData({
        scaleValue: seeHeight / this.data.containerHeight,
        blurValue: (1 - this.data.scaleValue) * 10
      });
    }
    // console.log("blurValue", this.data.blurValue, "scaleValue", this.data.scaleValue);
    // console.log("seeHeight", seeHeight);
  },
  onScroll: function (e) {
    const scrollTop = e.detail.scrollTop;
    console.log("scrollTop", scrollTop)
    if (scrollTop >= this.data.containerHeight * 0.5) {
      // 当滚动超过100rpx时，滚动到id为targetContent的元素
      this.setData({
        scrollToView: 'targetContent'
      });
    }
  },
  // 获取轮播图盒子的高度
  queryContainerHeight: function () {
    // 创建一个 selector 查询实例
    const query = wx.createSelectorQuery().select('.container').boundingClientRect(rect => {
      // 使用箭头函数确保 this 的指向
      this.setData({
        containerHeight: rect.height
      });
    });
    // 执行查询
    query.exec();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})